<template>
  <div style="width:100%;height:100%">
    <div id="aa">
  <Topbar></Topbar>
    </div>
   
      <div class="box1">
        <div class="cont">
               <Movielistone  title1="影院热映" title2="更多" :listdata="arra"></Movielistone>
          <Movielistone  title1="免费在线观影" title2="更多" :listdata="arrb"></Movielistone>
           <Movielistone   title1="新片速递" title2="更多" :listdata="arrc"></Movielistone>
        </div>
       
      </div>
      <div class="box2">
        <div class="cont">
    <Movietwo tit1="发现好电影" tit2="更多"></Movietwo>
        </div>
    
      </div>
      <div class="box3">
        <div class="cont">
       <p style="padding:0.1rem 0rem">分类浏览</p>
       <div class="three">
           <Moviethree v-for="(v,i) in arr1" :key="i" :t2="v"></Moviethree>
           <img src="movie01.png" alt="">
       </div>
        
        </div>
      </div>
     
           
    
  </div>
</template>
  
<script>
import Topbar from "@/components/topbar.vue";
import Movielistone from "@/components/movielistone.vue";
import {getlink} from "@/api/getapi.js"
import Movietwo from "@/components/movietwo.vue"
import Moviethree from "@/components/moviethree.vue"


export default {

  
components:{
    Topbar,Movielistone,Movietwo,Moviethree
  },
  data(){

    return {
      arr:[],
       arr1:["经典","冷门佳品","豆瓣高分","动作","戏剧","爱情","悬疑","恐怖","科幻","治愈","文艺","成长","动画","华语"]
    }
  },
 created(){
   getlink("/data/list/xiaoming").then((ok)=>{
     console.log(ok);
     this.arr=ok.data.books
   })
 },
 computed:{
   arra(){
     return this.arr.slice(0,6)
   },
    arrb(){
     return this.arr.slice(6,12)
   },
    arrc(){
     return this.arr.slice(12,20)
   },
 }
  
}
</script>

<style scoped>
#aa{
  width:100%;
  height: 0.8rem;
  position: fixed;
  top:0;
  overflow: hidden;
}
#aa #nav{
  position: relative;
}
.box1{
  margin-top:0.8rem;
  width:100%;
  height: 7.7rem;
  
}
 .cont{
  width:90%;
  margin:0 auto;
  height: 100%;
}
.box2{
  width:100%;
  height: auto;
}
.box3{
  font-size: 0.16rem;
}
.three{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  height: auto;
}
.three div{
  width: 50%;
  line-height: 0.5rem;
  
}
.three img{
  width: 3rem;
  height: 1.7rem;
}
</style>